<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    :items-per-page="30"
    :footer-props="footer"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>{{ title }}</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>

        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on, attrs }">
              <!-- <v-icon color="primary" v-bind="attrs" v-on="on">mdi-database-plus</v-icon> -->
            <v-btn icon large color="primary" v-bind="attrs" v-on="on"><v-icon>mdi-database-plus</v-icon></v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                    <!-- 仿写下面的col  -->
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.input" label="请输入"></v-text-field>
                  </v-col>  
                  <v-col cols="12" sm="6" md="6">
                      <v-select v-model="editedItem.select" :items="options" label="请选择" ></v-select>
                    </v-col>                
                </v-row>
              </v-container>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="error" text @click="close">Cancel</v-btn>
              <v-btn color="success" text @click="save">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon color="primary" class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
      <v-icon color="warning" @click="deleteItem(item)"> mdi-delete </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<script>
// 引用各自的API
import { listApi } from "@/api/resource.js";
import { mapGetters } from "vuex";

export default {
  data: () => ({
    dialog: false,
    search: "",
    desserts: [],
    editedIndex: -1,
    editedItem: {},
    options: [],
    // Todo 修改下面三个字段
    // ============================================================================
    title: "Table Title",
    headers: [
      //   这里写列信息
      { text: "Actions", value: "actions", sortable: false },
    ],
    defaultItem: {
      name: "",
    },
    // ============================================================================
  }),
  computed: {
    ...mapGetters("app", ["footer"]),
    formTitle() {
      return this.editedIndex === -1
        ? "新建" + this.title
        : "更新" + this.title;
    },
  },

  watch: {
    dialog(val) {
      val || this.close();
    },
  },

  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      // Todo 这里从后台请求数据，写入this.desserts

      // Todo 如果Dialog中涉及Select,请在此处初始化this.options 

    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },
    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    //  下面两个方法需要增加相应的后台交互操作
    save() {
      if (this.editedIndex > -1) {
        //   update
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        //   create
        this.desserts.push(this.editedItem);
      }
      this.close();
    },
    deleteItem(item) {
      const index = this.desserts.indexOf(item);
      confirm("Are you sure you want to delete this item?") &&
        this.desserts.splice(index, 1);
    },
  },
};
</script>